<template>
	<view>
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.title}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_no}} : {{order.orderInfo.order_no}}</view>
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_type}} : {{order_type}}</view>	
			</view>
		</view>	

		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.peifu}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;display: flex;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;width: 50%;">{{text.baozhengjin}} </view>
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;width: 50%;text-align: right;">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input">{{array[index].name}}</view>
					</picker>
				</view>	
			</view>
		</view>	
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.apply}}  </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<u-form-item >
					<u-input v-model="content"  :custom-style="{height:'100rpx'}" height="100" type="textarea" maxlength="1500" />
				</u-form-item>
			</view>
		</view>
		
		<view class="cardBox" >
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle">{{text.upload_pic}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<formImages v-if="loading" :item="item_img" @change="selImages" />
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<formFiles  v-if="loading" :item="item_file" @change="selFiles" />
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<formVideos  v-if="loading" :item="item_video" @change="selVideo" />
			</view>
		</view>
		
		<block>
			<view style="display: flex;width:90%;margin-left:5%">
				<view style="width: 100%;">
					<u-button @click="aftersales()"  style="" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
						>
						{{ $t('提交申请') }}
					</u-button>
				</view>
			</view>
			<view style="height: 30px;"></view>	
		</block>
		
	</view>
</template>

<script>
	import formImages from "@/components/buildForm/formImages.vue";
	import formFiles from "@/components/buildForm/formFiles.vue";
	import formVideos from "@/components/buildForm/formVideos.vue";
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			formImages,formFiles,formVideos
		},
		props:{
			is_publisherApply_edit:{
				type:Number,
				default:0
			},
			text:{
				type:Object,
				default:{}
			},
			afterSalesRecord:{
				type:Object,
				default:{}
			},
			order:{
				type:Object,
				default:{}
			},
			customStyle1:{
				type:Object,
				default:{}
			},
			customStyle11:{
				type:Object,
				default:{}
			},
			customStyle2:{
				type:Object,
				default:{}
			},
			customStyle3:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				
				img:HTTP_IMG_UTL+'huangjin.png',
				subDisabled:false,
				order_type:'',
				array:[
					{ name: '请选择赔付百分比' }, { name: '0%' },
					{ name: '10%' },{ name: '20%' }, { name: '30%' },{ name: '40%' },{ name: '50%' },
					{ name: '60%' },{ name: '70%' }, { name: '80%' },{ name: '90%' },{ name: '100%' }
				],
				index:0,
				
				item_img:{required:false,key:'images',value:[]},
				item_file:{required:false,key:'file',value:[]},
				item_video:{required:false,key:'video',value:[]},
				loading:false,
				
				images:[],
				file:[],
				video:[],
				content:''
				
			}
		},
		mounted(){
			console.log(this.order)
			//goods=货物,transport=运输,crossborder=跨境货代,professional=专业代办
			if(this.order.orderInfo.type=='goods'){
				this.order_type=this.$t('货物')
			}else if(this.order.orderInfo.type=='transport'){
				this.order_type=this.$t('运输')
			}else if(this.order.orderInfo.type=='crossborder'){
				this.order_type=this.$t('跨境货代')
			}else if(this.order.orderInfo.type=='professional'){
				this.order_type=this.$t('专业代办')
			}
			
			if(this.afterSalesRecord){
				if(this.afterSalesRecord.compensate==0){
					this.index=1
				}
				if(this.afterSalesRecord.compensate==10){
					this.index=2
				}
				if(this.afterSalesRecord.compensate==20){
					this.index=3
				}
				if(this.afterSalesRecord.compensate==30){
					this.index=4
				}
				if(this.afterSalesRecord.compensate==40){
					this.index=5
				}
				if(this.afterSalesRecord.compensate==50){
					this.index=6
				}
				if(this.afterSalesRecord.compensate==60){
					this.index=7
				}
				if(this.afterSalesRecord.compensate==70){
					this.index=8
				}
				if(this.afterSalesRecord.compensate==80){
					this.index=9
				}
				if(this.afterSalesRecord.compensate==90){
					this.index=10
				}
				if(this.afterSalesRecord.compensate==100){
					this.index=11
				}
				
				if(this.lang=='zh'){
					this.content = this.afterSalesRecord.application_description
				}else{
					this.content = this.afterSalesRecord.application_description_ru
				}
				
				this.images = this.afterSalesRecord.images
				if(this.images){
					this.item_img =  {required:false,key:'images',value:this.images}
				}else{
					this.item_img =  {required:false,key:'images',value:[]}
				}
				
				this.file = this.afterSalesRecord.file
				if(this.file){
					this.item_file =  {required:false,key:'file',value:this.file}
				}else{
					this.item_file =  {required:false,key:'file',value:[]}
				}
				
				this.video = this.afterSalesRecord.video
				if(this.video){
					this.item_video =  {required:false,key:'video',value:this.video}
				}else{
					this.item_video =  {required:false,key:'video',value:[]}
				}
				
				
				
				this.loading = true
				
			}else{
				this.loading = true
				
			}
			
			
		},
		methods:{
			bindPickerChange: function(e) {
			    this.index = e.detail.value;
			},
			aftersales(){
				const that = this
				if(that.index==0){
					var rate = 0
				}else{
					if(that.array[that.index]['name']=='0%'){
						var rate = 0
					}
					if(that.array[that.index]['name']=='10%'){
						var rate = 10
					}
					if(that.array[that.index]['name']=='20%'){
						var rate = 20
					}
					if(that.array[that.index]['name']=='30%'){
						var rate = 30
					}
					if(that.array[that.index]['name']=='40%'){
						var rate = 40
					}
					if(that.array[that.index]['name']=='50%'){
						var rate = 50
					}
					if(that.array[that.index]['name']=='60%'){
						var rate = 60
					}
					if(that.array[that.index]['name']=='70%'){
						var rate = 70
					}
					if(that.array[that.index]['name']=='80%'){
						var rate = 80
					}
					if(that.array[that.index]['name']=='90%'){
						var rate = 90
					}
					if(that.array[that.index]['name']=='100%'){
						var rate = 100
					}
				
				}
				if(that.content==''){
					uni.showModal({
						content: that.$t('请输入内容'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				
				if(that.is_publisherApply_edit==0){
					that.$u.api.order.aftersales({
						order_id: that.order.orderInfo.id,
						order_join_id: that.order.orderInfo.join_order_id,
						join_user_id:that.order.orderInfo.join_user_id,
						images:that.images,
						file:that.file,
						video:that.video,
						application_description :that.content,
						aftertsales_type:1,
						compensate:rate,
						lang:that.lang
					}).then(res => {
						uni.showModal({
							content: that.$t('操作成功'),
							showCancel: false,
							confirmText: this.$t('是'),
						})
						setTimeout(function() {
							that.$emit('change','customer','publisherApply',res)
						}, 2000);
						
						return false;
					})
				}else{
					that.$u.api.order.aftersalesEdit({
						order_id: that.order.orderInfo.id,
						order_join_id: that.order.orderInfo.join_order_id,
						join_user_id:that.order.orderInfo.join_user_id,
						images:that.images,
						file:that.file,
						video:that.video,
						application_description :that.content,
						is_publisherApply_edit:that.is_publisherApply_edit,
						aftertsales_type:1,
						compensate:rate,
						lang:that.lang
					}).then(res => {
						
						uni.showModal({
							content: that.$t('操作成功'),
							showCancel: false,
							confirmText: this.$t('是'),
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: -1
							});
						}, 2000);
						
					})
				}
			},
			selImages(e,data){
				this.images=data
			},
			selFiles(e,data){
				this.file=data
			},
			selVideo(e,data){
				this.video = data
			},
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>